<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
		<div class="zhezhao">
			<div class="denglu">
				<div class="denglulable">
				忘记密码
				</div>
				<div class="zhanghaolable">
					你的手机
				</div>
				<div class="zhanghaoinput">
          <el-input
            placeholder="请输入手机号"
            v-model="signupForm.phonenumber"
            prefix-icon="el-icon-mobile-phone">
          </el-input>
				</div>
				<div class="mimalable">
					新密码
				</div>
				<div class="mimainput">
          <el-input
            placeholder="请输入新密码"
            v-model="signupForm.password"
            prefix-icon="el-icon-key">
          </el-input>
				</div>
				<div class="mimalable">
					验证码
				</div>
				<div class="mimainput">
          <el-input
            placeholder="请输入验证码"
            v-model="signupForm.code">
            <i slot="prefix" class="el-input__icon el-icon-chat-dot-square"></i>
            <el-button slot="append" @click="sendSignUpCode">{{isWait?`等待${sendWaitTime}秒`:'发送验证码'}}</el-button>
          </el-input>
				</div>
				<!-- <div class="remembercheckbox">
					<input type="checkbox" name="" id="" value="" /><span class="text-[12px] jizhuzhanghao">记住账号</span>
				</div> -->
				<a href="#" class="text-[#FFFFFF] denglubtn" @click="userSignUp">
					确定
				</a>
				<div class="denglufangshi flex justify-between">
					<a href="#" class="left" @click="goToSignIn">
						我要登录
					</a>
					<a href="#" class="right" @click="gosingncode">
						验证码登录
					</a>
				</div>
				<a href="#" class="wechatdenglubtn">
					微信扫码登陆
				</a>
			</div>
		</div>
  </div>
</template>

<script>
import { forword, sendCode } from '@/api/user'
import NavBar from "@/components/NavBar.vue"

export default {
  name: 'SignUpView',
  components: {
    NavBar
  },
  data() {
    return {
      signupForm: {
        phonenumber: '',
        password: '',
        code: ''
      },
      isWait: false,
      sendWaitTime: 0
    }
  },
  methods: {
    gosingncode(){
      this.$router.push('singncode')
    },
    goToSignIn() {
      this.$router.push('signin')
    },
    userSignUp() {
      forword(this.signupForm).then(res => {
        if(res.result==1){
          this.$notify({
                message: res.msg,
                type: 'success',
                duration: 1000
              })
              setTimeout(()=>{
                this.$router.push({ name: 'signin' })
              },1000)
         
        }else{
          this.$notify({
                message: res.msg,
                type: 'error',
                duration: 2000
              })
        }
       
      })
    },
    sendSignUpCode() {
      if(this.signupForm.phonenumber==''){
 return  this.$notify({
                message: '请填写正确的手机号',
                type: 'error',
                duration: 2000
              })
      }
      sendCode({ phonenumber: this.signupForm.phonenumber }).then(res => {
        console.info(res)
        if(res.result==1){
          this.$notify({
                message: res.msg,
                type: 'success',
                duration: 2000
              })
          this.isWait = true;
          this.sendWaitTime = 60 ;
          this.timeDown()
        }else{
          this.$notify({
                message: res.msg,
                type: 'error',
                duration: 2000
              })
        }
       
      })
    },
    timeDown(){
      let that = this;
      if(this.sendWaitTime<=0){
        that.isWait = false;
      }else{
        this.sendWaitTime -- ;
        setTimeout(() => {
          that.timeDown()
        }, 1000);
      }
    }
  }
}
</script>

<style>
.zhezhao {
  width: 100%;
  height: 100%;
}

.denglu {
  width: 24rem;
  background: #FFFFFF;
  margin: auto;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  margin-top: 100px;
}

.denglu .denglulable {
  font-size: 1.25rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  padding-top: 30px;
  margin-left: 2.1875rem;
}

.denglu .zhanghaolable {
  font-size: 12px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-left: 2.1875rem;
  margin-top: 1.5625rem;
}

.denglu .zhanghaoinput {
  width: 19.375rem;
  margin-left: 2.1875rem;
  margin-top: 0.75rem;
}

.denglu .mimalable {
  font-size: 12px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-left: 2.1875rem;
  margin-top: 0.8125rem;
}

.denglu .mimainput {
  width: 19.375rem;
  margin-left: 2.1875rem;
  margin-top: 0.75rem;
}

.denglu .remembercheckbox {
  display: flex;
  align-items: center;
  margin-top: 0.9375rem;
  margin-left: 2.1875rem;
}

.denglu .denglubtn {
  width: 19.375rem;
  height: 2.75rem;
  background: #FE7743;
  border-radius: 0.25rem;
  margin-top: 1.4375rem;
  margin-left: 2.1875rem;
  line-height: 2.75rem;
  text-align: center;
  display: block;
}

.denglu .jizhuzhanghao {
  margin-left: 0.5rem;
}

.denglu .denglufangshi {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FE7743;
  margin-top: 0.75rem;
  margin-left: 2.1875rem;
  margin-right: 2.4375rem;
}

.denglu .wechatdenglubtn {
  margin-top: 1.5rem;
  background: #FFDFD3;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  align-self: flex-end;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FE7743;
  display: block;
}
</style>